@import url('../../utils/less/base.less');

.page {
    &>.back {
        .fixed(_, _, _, 32rpx);
        .bgcolor(rgba(0, 0, 0, .3));
        .radius(4rpx);
        padding: 6rpx;
        z-index: 1;

        &>.back-icon {
            display: block;
            line-height: 1;
            width: 50rpx;
            height: 50rpx;
        }
    }

    &>.swiper {
        height: 460rpx;

        & .banner-img {
            .bgimg(cover);
            height: 100%;
        }
    }

    &>.doctor-info {
        .bgcolor(#00b0f0);
        padding: 0 28rpx 28rpx 28rpx;

        &>.row {
            .bgcolor(white);
            .radius(10rpx);
            .flex-start();
            padding: 32rpx 32rpx 50rpx;

            &>.avatar-name {
                .flex-start(col, center, none);

                &>.avatar {
                    .bgimg(cover);
                    box-shadow: 0 0 10rpx 0 #666;
                    width: 180rpx;
                    height: 130rpx;
                }

                &>.name {
                    .text(32rpx);
                    margin-top: 20rpx;
                }
            }

            &>.info {
                .flex(auto);
                margin-left: 32rpx;

                &>.title {
                    .text(32rpx);
                    margin-bottom: 10rpx
                }

                &>.desc {
                    .text(24rpx, #999);
                    margin-top: 20rpx;
                }
            }
        }
    }

    &>.section-text {
        margin: 50rpx 32rpx;

        &>.title {
            .text(34rpx, bold);
            .flex-center();

            &>.title-tag {
                border-bottom: 6rpx solid #94b8ff;
                line-height: 1;
            }
        }

        &>.content {
            .text(bold, 36rpx, center);
            margin-top: 30rpx;
        }
    }

    &>.price-btn {
        .bgcolor(#00b0f0);
        .fixed(bl);
        .flex-center(center);
        .text(#fff, 34rpx);
        z-index: 1;
        width: 100%;
        box-shadow: 0 0 20rpx -6rpx #333;
        height: 88rpx;

        &>.buytext {
            .text(#fff);
        }
        &>.price {
            .flex-center(center);
            &>.discount {
                .text(#f3d422, bold);
                margin: 0 10rpx;
            }
    
            &>.normal {
                .text(#e4e4e4, deline, 24rpx);
            }
        }
    }

    &>.placeholder {
        height: 88rpx;
    }

    & .popup {
        .bgcolor(white);

        &>.title {
            .text(center, 32rpx);
            line-height: 90rpx;
            box-shadow: 0 0 12rpx -6rpx #333;
        }

        &>.patient {
            .overflow-auto(y);
            max-height: 600rpx;
            padding: 0 32rpx;

            &>.item {
                .flex-between(center);
                margin: 20rpx 0;

                &>.info {
                    &>.name {
                        .text(32rpx);
                    }

                    &>.birthday {
                        .text(#999);
                    }
                }
            }

            &>.bottomline {
                .text(center, #999);
                margin: 30rpx 0;
            }
        }

        &>.jump {
            .text(center, 32rpx, #333);
            box-shadow: 0 0 12rpx -6rpx #333;
            line-height: 90rpx;
        }

        &>.add-patient {
            .text(center, 32rpx, #fff);
            .bgcolor(#16ad91);
            line-height: 90rpx;
        }
    }
}